<template>
  <div class="head">
    <van-row type="flex" align="center">
      <van-col span="4">
        <van-image
          round
          lazy-load
          fit="cover"
          width="50"
          height="50"
          :src="article.author.decorate_avatar"
          @click="goAuther(article.author_id)"
        />
      </van-col>
      <van-col span="20">
        <van-row type="flex" align="bottom" justify="space-between">
          <van-col>
            <h5 @click="goAuther(article.author_id)">
              {{ article.author.username }}
            </h5>
          </van-col>
          <van-col>
            <van-row type="flex">
              <van-col style="margin-right: 5px">
                <van-icon
                  :name="isCollected ? 'star' : 'star-o'"
                  :color="isCollected ? '#fbd326' : ''"
                  size="20"
                  @click="collectArticle"
                />
              </van-col>
              <van-col>
                <van-icon
                  :name="isFollowing ? 'checked' : 'add-o'"
                  :color="isFollowing ? '#fbd326' : ''"
                  size="20"
                  @click="followUser"
                />
              </van-col>
            </van-row>
          </van-col>
        </van-row>
        <van-row
          class="info"
          type="flex"
          justify="space-between"
          align="center"
        >
          <van-col>
            {{ article.create_time | dateFormat }}
          </van-col>
          <van-col style="display: flex">
            <div class="info-right">
              <van-icon name="eye-o" style="font-size: 14px" />&nbsp;
              <span>{{ article.clicks }}</span>
            </div>
            <div class="info-right">
              <van-icon name="comment-o" style="font-size: 14px" />&nbsp;
              <span>{{ article.comment_count }}</span>
            </div>
          </van-col>
        </van-row>
        <h4>{{ article.title }}</h4>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { collectArticleAPI, cancelCollectArticleAPI } from "@/api/articleApi";
import { followUserAPI, unfollowUserAPI } from "@/api/userApi";
import { mapActions, mapState } from "vuex";
export default {
  computed: {
    ...mapState("user", ["profile"]),
    ...mapState("article", ["article"]),
    isCollected() {
      return this.article.collection_users.includes(this.profile.id);
    },
    isFollowing() {
      return this.article.author.fans.includes(this.profile.id);
    },
  },
  methods: {
    ...mapActions("article", ["initArticle"]),
    async collectArticle() {
      if (!this.isCollected) {
        const { data: res } = await collectArticleAPI(this.article.id);
        if (res.message == "OK") {
          this.$notify({
            type: "success",
            message: "收藏成功",
            duration: 1000,
          });
        }
      } else {
        const { data: res } = await cancelCollectArticleAPI(this.article.id);
        if (res.message == "OK") {
          this.$notify({
            type: "warning",
            message: "取消收藏成功",
            duration: 1000,
          });
        }
      }
      this.initArticle(this.article.id);
    },
    async followUser() {
      if (!this.isFollowing) {
        const { data: res } = await followUserAPI(this.article.author_id);
        if (res.message == "OK") {
          this.$notify({
            type: "success",
            message: "关注成功",
            duration: 1000,
          });
        } else {
          this.$notify({
            type: "warning",
            message: res.message,
            duration: 1000,
          });
        }
      } else {
        const { data: res } = await unfollowUserAPI(this.article.author_id);
        if (res.message == "OK") {
          this.$notify({
            type: "success",
            message: "取消关注成功",
            duration: 1000,
          });
        } else {
          this.$notify({
            type: "success",
            message: res.message,
            duration: 1000,
          });
        }
      }
      this.initArticle(this.article.id);
    },
    goAuther(id) {
      this.$router.push(`/users/${id}`);
    },
  },
};
</script>

<style lang="less">
.head {
  padding: 10px 10px;
  background-color: #f9f9f9;
}
.head h5 {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  color: #666;
}
.head h4 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}
.head .info {
  color: #666;
  font-size: 12px;
}
.head .info-right {
  display: flex;
  align-items: stretch;
  margin-left: 5px;
}
</style>
